@import './colors.scss';
@import './border-radius.scss';

// Bootstrap configuration before Bootstrap is imported
$border-radius: var(--border-radius);
$border-radius-sm: var(--border-radius);
$border-radius-lg: var(--border-radius);
$popover-border-radius: var(--popover-border-radius);

$font-size-base: 0.875rem;
$line-height-base: (20/14);

$box-shadow: var(--box-shadow);

$grid-gutter-width: 1.5rem;

// No max width except for xl.
$container-max-widths: (
    xl: 1140px,
);

$border-color: var(--border-color);

// Links

$link-color: var(--link-color);
$link-hover-color: var(--link-hover-color);

// Badges

$badge-font-size: var(--badge-font-size);
$badge-font-weight: var(--badge-font-weight);
$badge-padding-y: var(--badge-padding-y);
$badge-padding-x: var(--badge-padding-x);
$badge-border-radius: var(--badge-border-radius);

// Tooltips

$tooltip-bg: var(--tooltip-bg);
$tooltip-opacity: 1;
$tooltip-font-size: 0.75rem;

// Forms

$form-check-input-margin-y: var(--form-check-input-margin-y);
$form-feedback-font-size: 0.75rem;
$input-btn-focus-width: 2px;
// The default focus ring for buttons is very hard to see, raise opacity.
// We only show the focus ring when using the keyboard, when the focus ring
// should be clearly visible.
$btn-focus-box-shadow: var(--focus-box-shadow);
$btn-link-disabled-color: var(--btn-link-disabled-color);
$btn-padding-y-sm: var(--btn-padding-y-sm);

// Forms don't manipulate the colors at compile time,
// which is why we can use CSS variables for theming here
// That's nice because the forms theming CSS would otherwise
// be way more complex than it is for other components
$input-bg: var(--input-bg);
$input-disabled-bg: var(--input-disabled-bg);
$input-border-color: var(--input-border-color);
$input-color: var(--input-color);
$input-placeholder-color: var(--input-placeholder-color);
$input-group-addon-color: var(--input-group-addon-color);
$input-group-addon-bg: var(--input-group-addon-bg);
$input-group-addon-border-color: var(--input-group-addon-border-color);
$input-focus-border-color: var(--input-focus-border-color);
$input-focus-box-shadow: var(--input-focus-box-shadow);

// Custom Selects
$custom-select-bg-size: 16px 16px;
$custom-select-disabled-bg: var(--input-disabled-bg);
$custom-select-focus-box-shadow: var(--input-focus-box-shadow);
// Icon: mdi-react/ChevronDownIcon
$custom-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$redesign-gray-06}' viewBox='0 0 24 24'><path d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6-6-6 1.41-1.42z'/></svg>");
// Hide feedback icon for custom-select
$custom-select-feedback-icon-size: 0;

// Dropdown
$dropdown-bg: var(--dropdown-bg);
$dropdown-border-color: var(--dropdown-border-color);
$dropdown-divider-bg: var(--border-color);
$dropdown-link-color: var(--body-color);
$dropdown-link-hover-color: var(--body-color);
$dropdown-link-hover-bg: var(--dropdown-link-hover-bg);
$dropdown-link-active-color: #ffffff;
$dropdown-link-active-bg: var(--primary);
$dropdown-link-disabled-color: var(--text-muted);
$dropdown-header-color: var(--dropdown-header-color);
$dropdown-item-padding-y: 0.25rem;
$dropdown-item-padding-x: 0.5rem;
$dropdown-padding-y: $dropdown-item-padding-y;

// Tables

$table-cell-padding: 0.625rem;
$table-border-color: var(--border-color);

// Progress
$progress-height: auto;

// Collapsible
$collapsible-expand-btn-width: 1.25rem;

$hr-border-color: var(--border-color);
$hr-margin-y: 0.25rem;

// Disable transitions
$input-transition: none;
$badge-transition: none; // Avoids setting transitions on badges that aren't links

// Apply static redesign variables. Should be done before Bootstrap imports.
@import './variables-redesign';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/utilities';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/progress';
@import 'bootstrap/scss/tooltip';
@import 'bootstrap/scss/transitions';

// Modified in `./buttons.scss`
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/button-group';

// Modified in `./forms.scss`
@import 'bootstrap/scss/forms';
@import 'bootstrap/scss/custom-forms';
@import 'bootstrap/scss/input-group';

@import 'wildcard/src/global-styles/breakpoints';
@import 'shared/src/global-styles/icons';
@import './background';
@import './badge';
@import './card';
@import './dropdown';
@import './modal';
@import './meter';
@import './popover';
@import './nav';
@import './list-group';
@import './typography';
@import './tables';
@import './code';
@import './buttons';
@import './alert';
@import './forms';
@import './highlight';
@import './tabs';
@import './tooltips';
@import '~@sourcegraph/react-loading-spinner/lib/LoadingSpinner.css';

* {
    box-sizing: border-box;
}

// Our simple popovers only need these styles. We don't want the caret or special font sizes from
// Bootstrap's popover CSS.
.popover-inner {
    background-color: var(--body-bg);
    border: solid 1px var(--border-color);
    border-radius: $border-radius;

    .theme-redesign & {
        background-color: var(--color-bg-1);
        box-shadow: var(--dropdown-shadow);
        border-radius: var(--popover-border-radius);
        // Ensure content is clipped by border
        overflow: hidden;
    }
}

// Show a focus ring when performing keyboard navigation. Uses the polyfill at
// https://github.com/WICG/focus-visible because few browsers support :focus-visible.
:focus:not(:focus-visible) {
    outline: none;
}
:focus-visible {
    outline: 0;
    box-shadow: var(--focus-box-shadow);
}

.cursor-pointer,
input[type='radio'],
input[type='checkbox'] {
    &:not(:disabled) {
        cursor: pointer;
    }
}
